<template>
  <div>
    <div class="header">
      <div>
        <img @click="shuoImgs" :src="store.state.userData[0]?.imgurl" alt="" />
        <div>
          <div>{{ store.state.userData[0]?.name }}</div>
          <div>{{ store.state.userData[0]?.title }}</div>
        </div>

      </div>
      <div></div>
      <div @click="toUpdateUser"><van-icon name="ellipsis" /></div>
    </div>

    <div>
      <div class="dingdan">
        <div>
          我的订单
        </div>
        <RouterLink to="/userhome/all">
          <div>
            <span> 全部<van-icon name="arrow" /></span>
          </div>
        </RouterLink>
      </div>
      <div class="xinxi">
        <RouterLink to="/userhome/fukuan">
          <div>
            <div>
              <van-icon name="gold-coin-o" />
            </div>
            <div>
              <span>已付款</span>
            </div>
          </div>
        </RouterLink>
        <RouterLink to="/userhome/fahuo">
          <div>
            <div>
              <van-icon name="share-o" />
            </div>
            <div>
              <span>发货</span>
            </div>
          </div>
        </RouterLink>
        <RouterLink to="/userhome/shouh">
          <div>
            <div>
              <van-icon name="flag-o" />
            </div>
            <div>
              <span>收货</span>
            </div>
          </div>
        </RouterLink>
        <RouterLink to="/userhome/wsh">
          <div>
            <div>
              <van-icon name="underway-o" />
            </div>
            <div>
              <span>未收货</span>
            </div>
          </div>
        </RouterLink>
      </div>

    </div>
    <div class="todoList">
      <div v-for="item in todoList" :key="item.name" @click="changeRouter(item.route)">

        {{ item.name }}
        <span><van-icon name="arrow" /></span>
      </div>
    </div>
    <div class="tuicdl" @click="tuichuLogin">
      <van-icon name="arrow-left"  />退出登录
    </div>
  </div>
  <BomNav :active="active"></BomNav>
  <!-- <router-view></router-view> -->
</template>
<script lang="ts" setup>
import BomNav from "@/components/BomNav.vue";
import { showImagePreview } from "vant";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let store = useStore()
let active = ref(3)
let actives = ref(3)
let router = useRouter()
let todoList = reactive([
  
  {
    name: '我的优惠卷',
    route: '/userhome/youhui'
  },
  {
    name: '商品收藏',
    route: '/shoucang'
  },
  {
    name: '浏览记录',
    route: '/history'
  },
  {
    name: '收货地址',
    route: '/address'
  },

])

let imgssss = store.state.userData[0].imgurl
let shuoImgs = () => {
  showImagePreview({
    images: [
    imgssss
    ],
    closeable: true,
  });
}
let toUpdateUser = () => {
  router.push({
    path: '/updateuser'
  })
}
let changeRouter = (rout: string) => {
  router.push({
    path: rout
  })
}
let tuichuLogin = ()=>{
 localStorage.removeItem("userData")
 store.commit('updateUserData',{})
  router.push({
    path: "/"
  })
 

}

</script>
<style lang="less" scoped>
.tuicdl {
  
  width: 200rem;
  margin: 0 auto;
  font-size: 20rem;
  font-weight: 600;
  height: 45rem;
  line-height: 45rem;
  border-radius: 20rem;
  border: 1rem solid #2c3e50;
  margin-top: 50rem;
}

.todoList {
  width: 100vw;
  margin-top: 20rem;

  font-size: 18rem;

  >div {
    height: 45rem;
    line-height: 45rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 335rem;
    margin: 0 auto;

  }
}

.dingdan {
  width: 335rem;
  margin: 0 auto;
  text-align: left;
  font-size: 18rem;
  height: 60rem;
  line-height: 60rem;
  margin-top: 15rem;
  font-weight: 600;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  >div:nth-child(2) {
    font-size: 14rem;
    font-weight: 300;
  }

}

.xinxi {

  width: 335rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 14rem;
  margin-bottom: 15rem;
  margin-top: 8rem;

  i {
    display: block;
    font-size: 30rem;
  }
}

.header {
  width: 335rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  font-size: 16rem;
  justify-content: space-between;
  padding-top: 20rem;
  align-items: center;

  >div:nth-child(1) {
    display: flex;
    flex-wrap: nowrap;

    img {
      width: 65rem;
      height: 65rem;
      border-radius: 50%;
    }

    >div {
      margin-top: 5rem;
      margin-left: 10rem;
      display: block;
      height: 60rem;
      text-align: left;
      

      >div:nth-child(1) {
        font-size: 16rem;
        font-weight: 600;
        padding-left: 16rem;
      }

      >div:nth-child(2) {
        margin-top: 7rem;
        font-size: 16rem;
        margin-left: 12rem;
      }
    }
  }
  i{
    font-size: 25rem !important;
  }
}
a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration:  none;

  }
</style>
  